import React from "react";
import Item1 from './Item1';
import Item2 from './Item2';
import useNumReducer from './hooks/useNumReducer'

function Box() {
    const [state, dispatch] = useNumReducer();
    // 触发
    const increment = () => {
        dispatch({ type: "INCREMENT", payload: 1 });
    }
    const decrement = () => {
        dispatch({ type: "DECREMENT", payload: 1 });
    }
    return (
        <div className='wrapper wrapper2'>
            <h2 className='display-4'>useReducer自定义hooks函数</h2>
            <button onClick={increment} className='btn btn-danger'>父组件增加</button>
            <button onClick={decrement} className='ml-3 btn btn-warning'>父组件减少</button>
            <Item1 {...state} dispatch={dispatch} />
            <Item2 {...state} dispatch={dispatch} />
        </div>
    )
}

export default Box;